<template>


<!-- 搜索 -->
<div>
          <el-form :inline="true" >
            <el-form-item label="耗材编码">
              <el-input
                v-model="page.consumableCode"
                placeholder="请输入"
                clearable
              />
            </el-form-item>
            <el-form-item label="耗材名称">
              <el-input
                v-model="page.consumableName"
                placeholder="请输入"
                clearable
              />
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="show()">查询</el-button>
              <el-button type="primary" @click="dialogFormVisible = true">
              添加
              </el-button>
            </el-form-item>
          </el-form>
        </div>
    <el-table :data="tableData" style="width: 100%">
      <el-table-column fixed prop="consumableCode" label="耗材编码" width="150" />
      <el-table-column prop="consumableName" label="耗材名称" width="120" />
      <el-table-column prop="specification" label="规格" width="120" />
      <el-table-column prop="unit" label="单位" width="120" />
      <el-table-column prop="unitPrice" label="单价" width="120" />
      <el-table-column prop="manufacturer" label="生产厂家" width="120" />
      <el-table-column prop="status" label="状态" width="120" />
      <el-table-column fixed="right" label="操作" min-width="120">
        <template #default="scope">
          <el-button link type="primary" size="small" @click="handleClick">
            编辑
          </el-button>
          <el-button link type="primary" size="small" @click="Del(scope.row.consumableId)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>


    <el-dialog v-model="dialogFormVisible" title="耗材编辑" width="500">
    <el-form :model="ruleform">
      <el-form-item label="耗材分类" :label-width="formLabelWidth">
        <el-select v-model="ruleform.consumabletype" placeholder="请选择">
          <el-option label="A类器械" value="A类器械" />
          <el-option label="B类器械" value="B类器械" />
          <el-option label="C类器械" value="C类器械" />
          <el-option label="D类器械" value="D类器械" />
        </el-select>
      </el-form-item>
      <el-form-item label="耗材编码" :label-width="formLabelWidth">
        <el-input v-model="ruleform.consumableCode" autocomplete="off" />
      </el-form-item>
      <el-form-item label="耗材名称" :label-width="formLabelWidth">
        <el-input v-model="ruleform.consumableName" autocomplete="off" />
      </el-form-item>
      <el-form-item label="耗材规格" :label-width="formLabelWidth">
        <el-input v-model="ruleform.specification" autocomplete="off" />
      </el-form-item>
      <el-form-item label="单位" :label-width="formLabelWidth">
        <el-input v-model="ruleform.unit" autocomplete="off" />
      </el-form-item>
      <el-form-item label="单价" :label-width="formLabelWidth">
        <el-input v-model="ruleform.unitPrice" autocomplete="off" />
      </el-form-item>
      <el-form-item label="生产厂商" :label-width="formLabelWidth">
        <el-input v-model="ruleform.manufacturer" autocomplete="off" />
      </el-form-item>
     
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="AddConsum()">添加</el-button>
        <el-button type="primary" @click="dialogFormVisible = false">
          返回
        </el-button>
      </div>
    </template>
  </el-dialog>
  </template>
  
  <script lang="ts" setup>
import axios from 'axios'
import { ElMessage } from 'element-plus'
import { onMounted, reactive, ref } from "vue"

const dialogTableVisible = ref(false)
const dialogFormVisible = ref(false)
const formLabelWidth = '140px'


  const handleClick = () => {
    console.log('click')
  }

  const page=reactive({
   Index:1,
   Size:15,
   TotalCount:0,
   PageCount:0,
   consumableCode:"",
   consumableName:""
  })
  
  onMounted(()=>{
    show();
  })
const show=()=>{
    axios.get('https://localhost:7224/api/Show/Showhc',{params:page})
    .then(res=>{
      tableData.value=res.data.data
    })
}

const ruleform=reactive({
  consumableId: 0,
  consumabletype: "",
  consumableCode: "",
  consumableName: "",
  specification: "",
  unit: "",
  unitPrice: 0,
  manufacturer: "",
  status: true,
  isDElete: true
})

const AddConsum=()=>{
  axios.post('https://localhost:7286/api/Yjb/AddConsum',ruleform)
  .then(res=>{
    if(res.data.code==100)
     {
      ElMessage.success('添加成功')
      show();
     }
     else
     {
      ElMessage.error('添加失败')
     }
  })
}

const Del=(consumableId:any)=>{
  axios.put('https://localhost:7286/api/Yjb/DelConsum',{consumableId})
  .then(res=>{
    if(res.data.code==300)
     {
      ElMessage.success('删除成功')
      show();
     }
     else
     {
      ElMessage.error('删除失败')
     }
  })
}
  
  const tableData = ref([])
  </script>
  